<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./template/VisitorTemplate.xhtml">
    <ui:define name="begin">
        <f:view beforePhase="#{iAPaymentProcessingManagerBean.initPaymentProcessing}"/>
    </ui:define>

    <ui:define name="contentInsert">   
        <h:body>
            <f:view>
                <h:form id="formMain">
                    <p:growl id="growl" showDetail="true" />                   
                    <br/>
                    <p:fieldset style="width:950px">
                        <h:outputText value="Provide your credit/debit card information" style="font-weight:bold; font-size:12px"/>
                        <p:ajaxStatus style="width:16px;height:16px;">
                            <f:facet name="start">
                                <h:graphicImage value="/images/buttons/ajax-loader-bar1.gif" />
                            </f:facet>
                            <f:facet name="complete">
                                <h:outputText value="" />
                            </f:facet>
                        </p:ajaxStatus>
                        <p:messages />
                        <h:panelGrid columns="2" cellpadding="0">
                            <h:panelGrid columns="1" cellpadding="0" style="width:370px">
                                <h:outputText value="Card type" style="font-weight:bold; font-size:12px"/>
                                <h:selectOneMenu value="#{iAPaymentProcessingManagerBean.cardType}" id="cardType" >
                                    <f:selectItem itemValue="MasterCard"></f:selectItem>
                                    <f:selectItem itemValue="Visa"></f:selectItem>
                                    <f:selectItem itemValue="Discover"></f:selectItem>                               
                                </h:selectOneMenu>
                                <br/>
                                <h:outputText value="Card number" style="font-weight:bold; font-size:12px"/>
                                <h:panelGrid columns="1" cellpadding="0">
                                    <p:inputText value="#{iAPaymentProcessingManagerBean.cardNumber}" size="16" maxlength="16"/>

                                </h:panelGrid>
                                <h:outputText value="Amount pay:" style="font-weight:bold; font-size:12px"/>
                                <h:outputText value="#{iAPaymentProcessingManagerBean.paymentAmount} sgd" style="font-weight:bold; font-size:18px; color: #1f194f" rendered="#{iAPaymentProcessingManagerBean.paymentAmount != 0}"/>
                                <br/>
                                <h:panelGrid columns="2" cellpadding="0">
                                    <h:outputText value="CVC/CVV" style="font-weight:bold; font-size:12px"/>
                                    <p:graphicImage value="/images/buttons/question_mark_button.jpg" onclick="dialog1.show()"/>
                                </h:panelGrid>
                                
                                <p:inputText value="#{iAPaymentProcessingManagerBean.cvv}" size="3" maxlength="3"/>
                                <br/>
                                <h:outputText value="Valid until" style="font-weight:bold; font-size:12px"/>
                                <h:panelGrid columns="3" cellpadding="0">
                                    <h:selectOneMenu value="#{iAPaymentProcessingManagerBean.expMonth}" id="expiryMonth" >
                                        <f:selectItem itemLabel="January" itemValue="01"></f:selectItem>
                                        <f:selectItem itemLabel="February" itemValue="02"></f:selectItem>
                                        <f:selectItem itemLabel="March" itemValue="03"></f:selectItem>
                                        <f:selectItem itemLabel="April" itemValue="04"></f:selectItem>
                                        <f:selectItem itemLabel="May" itemValue="05"></f:selectItem>
                                        <f:selectItem itemLabel="June" itemValue="06"></f:selectItem>
                                        <f:selectItem itemLabel="July" itemValue="07"></f:selectItem>
                                        <f:selectItem itemLabel="August" itemValue="08"></f:selectItem>
                                        <f:selectItem itemLabel="September" itemValue="09"></f:selectItem>
                                        <f:selectItem itemLabel="October" itemValue="10"></f:selectItem>
                                        <f:selectItem itemLabel="November" itemValue="11"></f:selectItem>
                                        <f:selectItem itemLabel="December" itemValue="12"></f:selectItem>                                   
                                    </h:selectOneMenu>
                                    <h:outputText value="/" style="font-weight:bold; font-size:12px"/>
                                    <h:selectOneMenu value="#{iAPaymentProcessingManagerBean.expYear}" id="expiryYear" >
                                        <f:selectItems value="#{iAPaymentProcessingManagerBean.expYearList}"></f:selectItems>                             
                                    </h:selectOneMenu>
                                </h:panelGrid>

                            </h:panelGrid>
                            <h:panelGrid columns="2" cellpadding="0">
                                <p:graphicImage value="/images/buttons/paypal_creditcard.jpg"/>
                                <p:graphicImage value="/images/buttons/paypal_verified.jpg"/>
                            </h:panelGrid>

                        </h:panelGrid>
                    </p:fieldset>

                    <p:dialog header="CVC/CVV/CID" widgetVar="dialog1" showEffect="bounce" hideEffect="explode" width="400" height="450">
                        <span class="toolTipText">
                            <br/><b style="font-size:14px">What is a Credit card Verification Value number (CVV/CVC/CID)?</b><br /><br />The Credit card Verification Value is a security feature which appears on every credit card. This number is used in order to ascertain the identity and to prevent fraud. It is located on the back panel of your card.<br /><br /><b style="font-size:14px">Where can I find the Credit card Verification Value number (CVV/CVC/CID)?</b><br /><br />They are the last 3 digits in the signature box on the cardâ€™s back panel.<br /><br /><img src="https://static.groupon.sg/s/v/cb4021048887/images/layout/visa_mastercard_cvv.png" alt="CVV" />&nbsp;
                        </span>
                    </p:dialog>

                    <h:panelGrid columns="2" columnClasses="column" cellpadding="5">
                        <p:commandButton id="makePayment" value="Make Payment" ajax="true" actionListener="#{iAPaymentProcessingManagerBean.usePayPal}"/>
                    </h:panelGrid> 
                </h:form>
            </f:view>
        </h:body>
    </ui:define>
</ui:composition>